<template>
  <div :class='{login:true, box:true ,pr:true,night:this.backComName=="Stars",noon:this.backComName=="Noon",morning:this.backComName=="Moring"}'>
    <component :is="backComName" :class="{pa:true,stars:true}" :inputVal="inputVal"></component>
    <Card @inputVal="getAnswer"></Card>
  </div>
</template>
<script>
import Card from "../../plugs/card"
import Stars from './stars.vue'
import Noon from './noon.vue'
import Morning from './morning.vue'

export default {
  components: {Card,Stars,Noon,Morning},
  name: "",
  data() {
    return {
      backComName:"Stars",
      inputVal:"",
    };
  },
  methods:{
    getBacC(){
      var hour=new Date().toTimeString().slice(0,2)
      this.backComName=(hour>19)?"Stars":hour>12?"Noon":"Morning"
    },
    getAnswer(val){
      this.inputVal=val
    }
  },
  created() {
    this.getBacC()
  },
};
</script>
<style lang="scss" scoped>
.night{
  background: linear-gradient(#491e75 0%,#fff 100%);
}
.noon{
  background: linear-gradient(rgba(9, 171, 255, 0.59) 0%,#fff 100%);
}
.morning{
  background: linear-gradient(rgba(25, 44, 119, 0.91) 0%, #fff 100%)
}
.stars{
  width: 100%;
  height: 250px;
}

</style>